﻿@page "/collapses"
@inject IStringLocalizer<Collapses> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <Collapse OnCollapseChanged="@OnChanged">
        <CollapseItems>
            <CollapseItem Text="@Localizer["Consistency"]">
                <div>@Localizer["ConsistencyItem1"]</div>
                <div>@Localizer["ConsistencyItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Feedback"]" IsCollapsed="false">
                <div>@Localizer["FeedbackItem1"]</div>
                <div>@Localizer["FeedbackItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Efficiency"]">
                <div>@Localizer["EfficiencyItem1"]</div>
                <div>@Localizer["EfficiencyItem2"]</div>
                <div>@Localizer["EfficiencyItem3"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Controllability"]">
                <div>@Localizer["ControllabilityItem1"]</div>
                <div>@Localizer["ControllabilityItem2"]</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["AccordionTitle"]" Introduction="@Localizer["AccordionIntro"]" Name="Accordion">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="@Localizer["Consistency"]">
                <div>@Localizer["ConsistencyItem1"]</div>
                <div>@Localizer["ConsistencyItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Feedback"]">
                <div>@Localizer["FeedbackItem1"]</div>
                <div>@Localizer["FeedbackItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Efficiency"]">
                <div>@Localizer["EfficiencyItem1"]</div>
                <div>@Localizer["EfficiencyItem2"]</div>
                <div>@Localizer["EfficiencyItem3"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Controllability"]">
                <div>@Localizer["ControllabilityItem1"]</div>
                <div>@Localizer["ControllabilityItem2"]</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</DemoBlock>

<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="@Localizer["Consistency"]" TitleColor="Color.Primary">
                <div>@Localizer["ConsistencyItem1"]</div>
                <div>@Localizer["ConsistencyItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Feedback"]" TitleColor="Color.Info">
                <div>@Localizer["FeedbackItem1"]</div>
                <div>@Localizer["FeedbackItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Efficiency"]" TitleColor="Color.Success">
                <div>@Localizer["EfficiencyItem1"]</div>
                <div>@Localizer["EfficiencyItem2"]</div>
                <div>@Localizer["EfficiencyItem3"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Controllability"]" TitleColor="Color.Warning">
                <div>@Localizer["ControllabilityItem1"]</div>
                <div>@Localizer["ControllabilityItem2"]</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</DemoBlock>

<DemoBlock Title="@Localizer["ItemsTitle"]" Introduction="@Localizer["ItemsIntro"]" Name="Items">
    @if (State)
    {
        <Collapse>
            <CollapseItems>
                <CollapseItem Text="@Localizer["Consistency"]">
                    <div>@Localizer["ConsistencyItem1"]</div>
                    <div>@Localizer["ConsistencyItem2"]</div>
                </CollapseItem>
                <CollapseItem Text="@Localizer["Feedback"]" IsCollapsed="false">
                    <div>@Localizer["FeedbackItem1"]</div>
                    <div>@Localizer["FeedbackItem2"]</div>
                </CollapseItem>
            </CollapseItems>
        </Collapse>
    }
    else
    {
        <Collapse>
            <CollapseItems>
                <CollapseItem Text="@Localizer["Consistency"]">
                    <div>@Localizer["ConsistencyItem1"]</div>
                    <div>@Localizer["ConsistencyItem2"]</div>
                </CollapseItem>
                <CollapseItem Text="@Localizer["Feedback"]">
                    <div>@Localizer["FeedbackItem1"]</div>
                    <div>@Localizer["FeedbackItem2"]</div>
                </CollapseItem>
                <CollapseItem Text="@Localizer["Efficiency"]">
                    <div>@Localizer["EfficiencyItem1"]</div>
                    <div>@Localizer["EfficiencyItem2"]</div>
                    <div>@Localizer["EfficiencyItem3"]</div>
                </CollapseItem>
                <CollapseItem Text="@Localizer["Controllability"]">
                    <div>@Localizer["ControllabilityItem1"]</div>
                    <div>@Localizer["ControllabilityItem2"]</div>
                </CollapseItem>
            </CollapseItems>
        </Collapse>
    }
    <Button Text="@Localizer["ButtonText"]" OnClick="OnToggle" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
